<template>
  <div>
    <div
      class="box animate__animated animate__infinite animate__heartBeat"
    ></div>

    <div style="margin: 20px auto; width: 300px">
      <Transition name="hello" mode="in-out">
        <button v-if="docState === 'saved'" @click="docState = 'edited'">
          Edit
        </button>
        <button v-else-if="docState === 'edited'" @click="docState = 'editing'">
          Save
        </button>
        <button v-else-if="docState === 'editing'" @click="docState = 'saved'">
          Cancel
        </button>
      </Transition>
    </div>

    <hr />
    <hr />

    <button @click="isShow = !isShow">切换显示隐藏</button>

    <!-- 
      1. 使用 transiton 组件包裹元素
      2. 实现 transition 相关的类名
        v-enter-from
        v-enter-active
        v-enter-to
        v-leave-from
        v-leave-active
        v-leave-to

      属性 - name
            修改类名前缀，默认为 v
          - appear
            默认触发一次效果
          - mode
            - default 进入与离开同时进行 （默认）
            - in-out  先进入，再离开
            - out-in  先离开，再进入
     -->
    <transition
      enter-active-class="animate__animated"
      enter-to-class="animate__backInDown"
      leave-active-class="animate__animated"
      leave-to-class="animate__backOutUp"
    >
      <div v-if="isShow" class="box"></div>
    </transition>
  </div>
</template>

<script setup>
import { ref } from "vue";

const isShow = ref(true);
const docState = ref("saved");
</script>

<style>
.abc {
  transition: all 100s ease-out;
}
.box {
  width: 300px;
  height: 300px;
  background-color: green;
}

.hello-enter-from {
  transform: translateY(10px);
}

.hello-leave-to {
  transform: translateY(-10px);
}

.hello-enter-active,
.hello-leave-active {
  transition: all 2s ease-out;
}

/*  */

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
  transition: opacity 2s ease-in;
}

.fade-leave-to {
  opacity: 0;
}

/*  */
.slide-fade-enter-active {
  transition: all 2s ease-out;
}

.slide-fade-leave-active {
  transition: all 2s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(100px);
  opacity: 0;
}
</style>
